<template>
  <div>
    <GlobalHeader class="color-black bg-white"></GlobalHeader>

    <div
      class="w-full h-106px bg-[url('/src/assets/img/userCenter/bg_top.png')] bg-repeat-x"
    >
      <div
        class="w-980px h-106px m-[0_auto] bg-[url('/src/assets/img/userCenter/rl_top.png')]"
      ></div>
    </div>

    <!-- 个人中心 -->
    <div
      class="w-980px m-[0_auto] m-t-10px m-b-100px b b-solid border-[#e1e2e5] shadow-[0_2px_4px_rgba(0,0,0,0.14)] box-border flex"
    >
      <!-- 侧边栏 -->
      <div
        class="w-150px bg-[#fafafa] b-r b-r-solid b-b b-b-solid b-[#e1e2e5] box-border"
      >
        <div
          class="w-150px h-50px text-center leading-[50px] text-16px c-[#99a2aa] cursor-default b-b b-b-solid b-[#e1e2e5] box-border"
        >
          个人中心
        </div>
        <ul class="aside-menu">
          <li
            v-for="(item, index) in menuItems"
            @click="handleItemClick(index)"
            :class="{
              '!bg-[#00a1d7] c-[#fff]': activeIndex === index,
            }"
          >
            <span
              :class="[
                item.icon,
                activeIndex === index && '!c-white !b-[#fff]',
              ]"
            ></span>
            <span :class="item.trackingClass">{{ item.name }}</span>
          </li>
        </ul>
        <ul class="link-menu text-center">
          <li class="link-menu-item">
            <span>个人中心</span>
            <span class="iconfont icon-jiantou2"></span>
          </li>
          <li class="link-menu-item">
            <span>我的钱包</span>
            <span class="iconfont icon-jiantou2"></span>
          </li>
          <li class="link-menu-item">
            <span>创作中心</span>
            <span class="iconfont icon-jiantou2"></span>
          </li>
          <li class="link-menu-item">
            <span>直播中心</span>
            <span class="iconfont icon-jiantou2"></span>
          </li>
        </ul>
      </div>

      <!-- 内容 -->
      <Suspense>
        <component
          v-model:activeIndex="activeIndex"
          :is="menuItems[activeIndex].component"
        ></component>
      </Suspense>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, provide, ref } from "vue";
import Home from "./home/index.vue";
import MemberPoints from "./memberPoints/index.vue";
import UserInfo from "./userInfo/index.vue";
import HeadPic from "./headPic/index.vue";
import AchievementMedal from "./achievementMedal/index.vue";
import BlackList from "./blackList/index.vue";
import Coin from "./coin/index.vue";
import Record from "./record/index.vue";
import InviteRegister from "./inviteRegister/index.vue";
import Notice from "./notice/index.vue";

// 当前激活的菜单索引
const activeIndex = ref(0);

// 菜单数据
const menuItems = [
  {
    name: "首页",
    icon: "iconfont icon-shouye",
    trackingClass: "tracking-[30px]",
    component: Home,
    // component: defineAsyncComponent(() => import('./home/index.vue'))
  },
  {
    name: "大会员",
    icon: "iconfont icon-big-vip b b-solid b-[#99a2aa] b-rd-[50%]",
    trackingClass: "tracking-[8px]",
  },
  {
    name: "会员积分",
    icon: "iconfont icon-huiyuanjifen",
    component: MemberPoints,
  },
  {
    name: "我的信息",
    icon: "iconfont icon-gerenzhongxin",
    component: UserInfo,
  },
  { name: "我的头像", icon: "iconfont icon-wodetouxiang", component: HeadPic },
  { name: "粉丝勋章", icon: "iconfont icon-youzhi" },
  {
    name: "成就勋章",
    icon: "iconfont icon-xiaoxiong",
    component: AchievementMedal,
  },
  { name: "账号安全", icon: "iconfont icon-anquan" },
  {
    name: "黑名单管理",
    icon: "iconfont icon-heimingdan",
    component: BlackList,
  },
  { name: "我的硬币", icon: "iconfont icon-yingbi", component: Coin },
  { name: "我的记录", icon: "iconfont icon-jilu", component: Record },
  { name: "实名认证", icon: "iconfont icon-shimingrenzheng" },
  {
    name: "邀请注册",
    icon: "iconfont icon-yaoqingzhuce",
    component: InviteRegister,
  },
  { name: "通知设置", icon: "iconfont icon-shezhi1", component: Notice },
];

// 点击菜单项
const handleItemClick = (index) => {
  activeIndex.value = index;
  // router.push(item.path)
};

// 决定是否显示Header -> Logo
provide("showLogo", true);
</script>

<style scoped>
@import "../../assets/styles/userCenter.less";
</style>
